<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	</head>
	<body>
	<!--<div  id="blog-post-demo">
<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title">
 {{post.id}} {{post.title}}
</blog-post>

</div>-->
<div id="app">
	<p v-for="post in posts"
              v-bind:key="post.id"
              v-bind:title="post.title">
	{{post.id}} {{post.title}}
	</p>
              
  
</div>
<script type="text/javascript">
	
//Vue.component('blog-post', {
//props: ['title'],
//template: '<h3>{{ title }}</h3>'
//}),

//Vue.component('blog-post',{
//		props:['title'],//接受所有的porp数据
//		template:'<h1>{{title}}</h1>'//以模板的方式在body里面展示出来传入的title
//	
//}),
//new Vue({
//el: '#blog-post-demo',
//data: {
//  posts: [
//    { id: 1, title: 'My journey with Vue' },
//    { id: 2, title: 'Blogging with Vue' },
//    { id: 3, title: 'Why Vue is so fun' }
//  ]
//}
//})

//Vue.component('xx',{
//	props:['title'],
//	template:'<div><h1>{{title}}</h1><h1>{{title}}</h1></div>'
//单个的根节点必须用div包裹起来
//})
		new Vue({
			el:'#app'
		},
		data:{
			posts:[
			{id:1,title:'11111111'},
			{id:2,title:'11111111'},
			{id:3,title:'11111111'},
			{id:4,title:'11111111'}
			]//直接在数据中存储一个博文数组然后通过for循环去调用！
		}
		)
		
</script>
	</body>
</html>
